// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
export default class EchartsConfig {
  private myChart: any
  private option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      show: false,
      orient: 'vertical',
      x: 'left',
      data: []
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['80%', '100%'],
        avoidLabelOverlap: false,
        silent: true,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: []
      }
    ]
  }
  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption(
    data: any = {
      value: 0
    }
  ) {
    Object.assign(data, {
      name: 'val',
      label: {
        show: true,
        position: 'center',
        color: '#fff',
        fontSize: 10,
        formatter: (params: any) => {
          return Math.ceil(params.value * 100) + '%'
        }
      },
      itemStyle: {
        color: 'rgb(92, 169, 231)'
      }
    })
    let tempData = {
      name: 'other',
      value: 1 - data.value,
      itemStyle: {
        color: 'rgb(80, 82, 90)'
      }
    }
    ;(this.option.series[0] as any).data = [].concat(data, tempData as any)

    this.myChart && this.myChart.setOption(this.option)
  }
}
